<template>
    <div class="pageCon">
        <div class="mapContainer">
            <Map></Map>
        </div>
        <div class="timeLineCon">
            <el-timeline style="max-width: 600px">
                <el-timeline-item v-for="(activity, index) in logisticsList" :key="index" :icon="activity.icon"
                    :type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow"
                    :timestamp="activity.timestamp">
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>

</template>

<script setup>
import Map from '@/components/Map.vue'
import { inject, onMounted, ref, onUnmounted } from 'vue'
const logisticsList = ref([
    {
        content: '【泉州】您的订单预计明天送达',
        timestamp: '2024-12-19 12:00:00',
        type: 'primary',
        hollow: true,
    },
    {
        content: '【福州】您的订单已发货',
        timestamp: '2024-12-18 12:00:00'
    },
    {
        content: '【杭州】您的订单已到达杭州中转站',
        timestamp: '2024-12-15 12:00:00'
    },
    {
        content: '【上海】您的订单已提交',
        timestamp: '2024-12-13 12:00:00'
    },
])
const { setNeedColor } = inject('detailInf')
onMounted(() => {
    setNeedColor(true)
})
onUnmounted(() => {
    setNeedColor(false)
})
</script>

<style lang="scss" scoped>
.pageCon {
    padding-top: 10vh;
    display: flex;
    padding-left: 40px;

    .mapContainer {
        width: 800px;
        height: 800px;
    }


}
</style>